<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页三</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="__PEAR__/component/pear/css/pear.css" />
		<link rel="stylesheet" href="__PEAR__/admin/css/other/console1.css" />
		<!-- 主 题 更 换 -->
		<style id="pearadmin-bg-color"></style>
	</head>
	<body class="pear-container">
		<div>			
			<div class="layui-row layui-col-space10">
				<div class="layui-col-xs6 layui-col-md3">
					<div class="layui-card top-panel">
						<div class="layui-card-header">销售总金额</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value1">
									0
								</div>
								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
									<i class="layui-icon layui-icon-diamond" style="color:#ff6a08!important"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-xs6 layui-col-md3">
					<div class="layui-card top-panel">
						<div class="layui-card-header">收款总金额</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value2">
									0
								</div>
								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
									<i class="layui-icon layui-icon-rmb" style="color:#ff6a08!important"></i>
									</svg>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-xs6 layui-col-md3">
					<div class="layui-card top-panel">
						<div class="layui-card-header">POS收银终端数量</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value3">
									0
								</div>
								<div class="layui-col-xs4 layui-col-md4  top-panel-tips">
									<i class="layui-icon layui-icon-auz" style="color:#ff6a08!important"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-xs6 layui-col-md3">
					<div class="layui-card top-panel">
						<div class="layui-card-header">商品数量</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value4">
									0
								</div>
								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
									<i class="layui-icon layui-icon-cart" style="color:#ff6a08!important"></i>
									</svg>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md9">
					<div class="layui-card">
						<div class="layui-card-body">
							<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
								<div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
							</div>
						</div>
					</div>
					<div class="layui-card">
						<div class="layui-card-header">新注册会员信息</div>
						<div class="layui-card-body">
							<dl class="layuiadmin-card-status" id="memberbody">
								
							</dl>
						</div>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="layui-card">
						<div class="layui-card-header">单品销售排行</div>
						<div class="layui-card-body">
							<ul class="list">
								{volist name="goods" id="vo"}
								<li class="list-item"><span class="title">{$vo['item_name']|cut_str=###,16}</span><span class="footer">{$vo['sale_money']}元/{$vo['sale_qnty']|round=###}件</span></li>
								{/volist}
							</ul>
						</div>
					</div>
					<div class="layui-card">
						<div class="layui-card-header">
							终端POS同步记录
						</div>
						<div class="layui-card-body" >
							<ul class="list" id="posbody">
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--</div>-->
		<script src="__STATIC__/lib/layui/layui.js"></script>
		<script src="__PEAR__/component/pear/pear.js"></script>
		<script>
			layui.use(['layer', 'echarts', 'element', 'count','topBar'], function() {
				var $ = layui.jquery,
					layer = layui.layer,
					element = layui.element,
					count = layui.count,
					echarts = layui.echarts;

				count.up("value1", {
					time: 4000,
					num: {$saleamount},
					bit: 2,
					regulator: 50
				})

				count.up("value2", {
					time: 4000,
					num: {$payamount},
					bit: 2,
					regulator: 50
				})

				count.up("value3", {
					time: 4000,
					num: {$posnum},
					bit: 2,
					regulator: 50
				})

				count.up("value4", {
					time: 4000,
					bit: 2,
					num: {$iteminfo},
					regulator: 50
				})

				var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

				var option = {
					tooltip: {
						trigger: 'axis'
					},
					xAxis: [{
						type: 'category',
						data: [
						     	{$salesMonth}
						       ],
						axisLine: {
							lineStyle: {
								color: "#999"
							}
						}
					}],
					yAxis: [{
						type: 'value',
						splitNumber: 4,
						splitLine: {
							lineStyle: {
								type: 'dashed',
								color: '#DDD'
							}
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: "#333"
							},
						},
						nameTextStyle: {
							color: "#999"
						},
						splitArea: {
							show: false
						}
					}],
					series: [{
						name: '金额',
						type: 'line',
						data: [{$salesData}],
						lineStyle: {
							normal: {
								width: 8,
								color: {
									type: 'linear',

									colorStops: [{
										offset: 0,
										color: '#A9F387' // 0% 处的颜色
									}, {
										offset: 1,
										color: '#48D8BF' // 100% 处的颜色
									}],
									globalCoord: false // 缺省为 false
								},
								shadowColor: 'rgba(72,216,191, 0.3)',
								shadowBlur: 10,
								shadowOffsetY: 20
							}
						},
						itemStyle: {
							normal: {
								color: '#fff',
								borderWidth: 10,
								/*shadowColor: 'rgba(72,216,191, 0.3)',
								shadowBlur: 100,*/
								borderColor: "#A9F387"
							}
						},
						smooth: true
					}]
				};
				echartsRecords.setOption(option);

				window.onresize = function() {
					echartsRecords.resize();
				}
				
				
				//js输出会员信息
				function renderMember(data){
					if(data=='null'){
						return;
					}
					
					var _html='';
					for(var i in data){
						_html+='<dd>'
							+'<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"'
							+'src="__PEAR__/admin/images/avatar.jpg"></a></div>'
							+'<div>'
							+'<p> '+data[i]['uname']+'在 <a class="pear-text">'+data[i]['branch_name']+'</a> 注册</p>'
							+'<span>'+data[i]['addtime']+'</span>'
							+'</div>'
							+'</dd>';
					}
					
					$("#memberbody").html(_html);
				}
				
				//js输出pos信息
				function renderPos(data){
					if(data=='null'){
						return;
					}
					
					var _html='';
					for(var i in data){
						_html+='<li class="list-item">'
								+'<span class="title">'+data[i]['branch_name']+'</span><span class="footer">'+data[i]['synctime']+'</span>'
							  +'</li>';
					}
					
					$("#posbody").html(_html);
				}
				
				//获取POS端同步记录和会员记录
				$.ajax({
			            type: "POST",
			            cache: false,
			            url: "{:U('Main/syncData')}",
			            dataType: "json",
						data:{},
			            success: function(data) {
			            	renderMember(data['member']);
			            	renderPos(data['pos']);
			            }
			     });
			});
		</script>
	</body>
</html>
